<template>
    <div class="my-templates">
        <div v-if="!templateListShow && !templateShow">
            <div class="my-head">
                <div class="head-search">搜索栏</div>
                <div class="head-btn">
                    <div class="head-tab">
                        <span :class="tabSize == '1' ? 'head-tab-active' : ''" @click="handTab('1')"> <AppstoreOutlined /></span>
                        <span class="nonebr" :class="tabSize == '2' ? 'head-tab-active' : ''" @click="handTab('2')">
                            <UnorderedListOutlined
                        /></span>
                    </div>
                    <a-button size="middle" @click="AddTemplate('add')">新增模板</a-button>
                </div>
            </div>
            <a-spin :spinning="loading">
                <graphical
                    v-if="tabSize == '1'"
                    :list="dataSource"
                    :pagination="pagination"
                    :loading="loading"
                    :tableQuery="tableQuery"
                    @handleTableChange="handleTableChange"
                    @handleEdit="handleEdit"
                    @handRelation="handRelation"
                    @handCopy="handCopy"
                ></graphical>
            </a-spin>
            <list-table
                v-if="tabSize == '2'"
                :list="dataSource"
                :pagination="pagination"
                :loading="loading"
                @handleTableChange="handleTableChange"
                @handCopy="handCopy"
                @handleEdit="handleEdit"
                @handRelation="handRelation"
            ></list-table>
        </div>

        <addTemplate
            @nextStep="nextStep"
            @goBack="goBack"
            v-if="templateShow"
            :templateCode="templateCode"
            :tempType="tempType"
        ></addTemplate>
        <templateList v-if="templateListShow" :state="state" :templateCode="templateCode" @goBack="goBack"></templateList>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onMounted, computed, createVNode } from 'vue';
import { useI18n } from 'vue-i18n';
import { PaginationQuery } from '@/types/table';
import { FundOutlined, CopyOutlined, EyeOutlined, AppstoreOutlined, UnorderedListOutlined } from '@ant-design/icons-vue';
import { message, Modal } from 'ant-design-vue';
import { addModel, editModel } from '@/api/warehouse';
import { TableState, CheckAble } from '@/types/table';
import ylMultiButton from '@/components/ylMultiButton.vue';
import graphical from './components/graphical/index.vue';
import listTable from './components/listTable/index.vue';
import addTemplate from '@/components/template/add/index.vue';
import templateList from '@/components/template/index.vue';
import useTables from './listTable';

interface MoveBlock {
    [s: string]: number;
}

export default defineComponent({
    name: 'department',
    components: {
        ylMultiButton,
        CopyOutlined,
        FundOutlined,
        EyeOutlined,
        AppstoreOutlined,
        UnorderedListOutlined,
        graphical,
        listTable,
        addTemplate,
        templateList,
    },
    setup() {
        const { t } = useI18n();

        let { selectedRow, dataSource, getskuGoodsSkuList, tableQuery, loading, pagination } = useTables;
        const state: any = ref({});

        const tabSize = ref('1');
        const handTab = (index: string) => {
            tabSize.value = index;
        };

        const templateListShow = ref(false);
        const temp = reactive({
            tempType: '',
            templateCode: '',
            templateShow: false,
        });
        onMounted(async () => {
            loading.value = true;
            getskuGoodsSkuList(tableQuery);
        });
        const handleTableChange = (page: number) => {
            loading.value = true;
            tableQuery.page = page - 1;
            getskuGoodsSkuList(tableQuery);
        };
        const nextStep = (data: any) => {
            state.value = data;
            temp.templateShow = false;
            templateListShow.value = true;
        };
        // 新增模板
        const AddTemplate = (type: string) => {
            temp.templateShow = true;
            temp.tempType = type;
        };

        const update = (d: MoveBlock) => {
            // console.log(d);
            // initSize.value = {
            //     width: d.width,
            //     height: d.height,
            // };
        };
        const goBack = () => {
            temp.templateShow = false;
            templateListShow.value = false;
            loading.value = true;
            getskuGoodsSkuList(tableQuery);
        };

        const handleEdit = (codeId: string) => {
            temp.templateCode = codeId;
            temp.templateShow = true;
            temp.tempType = 'edit';
            console.log('handleEdit');
        };
        const handCopy = (codeId: string) => {
            temp.templateCode = codeId;
            temp.templateShow = true;
            temp.tempType = 'copy';
        };
        const handRelation = () => {
            getskuGoodsSkuList(tableQuery);
        };
        return {
            ...toRefs(temp),
            t,
            handTab,
            tabSize,
            dataSource,
            pagination,
            handleTableChange,
            loading,
            tableQuery,
            nextStep,
            handCopy,
            templateListShow,
            AddTemplate,
            state,
            update,
            goBack,
            handleEdit,
            handRelation,
            temp,
        };
    },
});
</script>

<style lang="scss" scoped>
.my-head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .head-btn {
        display: flex;
        .head-tab {
            margin-right: 10px;
            display: flex;
            text-align: center;
            line-height: 28px;
            cursor: pointer;
            > span {
                display: block;
                height: 28px;
                width: 32px;
                font-size: 20px;
                border: 1px solid #ccc;
            }
            .head-tab-active {
                color: #ff6702;
            }
            .nonebr {
                border-left: none;
            }
        }
    }
}
.my-main {
    width: 100%;
    display: flex;

    flex-direction: row;
    flex-wrap: wrap;
    .my-item {
        width: 18%;
        margin: 1%;
        height: 290px;
        padding: 15px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        .my-img {
            width: 100%;
            position: relative;
            .img-err {
                width: 100%;
                background: #f4f4f4;
                height: 153px;
                text-align: center;
                line-height: 153px;
                font-size: 30px;
                color: #ccc;
            }
            .my-icon {
                position: absolute;
                top: 10px;
                right: 15px;
                > button {
                    margin-left: 5px;
                }
            }
        }
        .my-title {
            font-size: 16px;
            margin-top: 16px;
        }
        .my-tag,
        .my-edit {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .my-edit {
            border-top: 1px solid #f2f2f2;
            margin-top: 10px;
            padding: 12px 0;
            .my-edit-text {
                font-size: 14px;
                .my-edit-num {
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    text-align: center;
                    border-radius: 10px;
                    background: #ff6702;
                    color: #fff;
                }
            }
            .my-icon {
                font-size: 16px;
            }
        }
    }
}
</style>
<style>
.ant-image-img,
.ant-image {
    width: 100%;
    height: 153px;
}
/* .parent {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 100px;
    left: 100px;
    border: 1px solid #000;
    user-select: none;
} */
</style>
